<template>
  <div class="comp-page-table"
    layout="column" layout-align="start end">
    <!-- 表格区域
    -------------------------- -->
    <el-table
      :border="true"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      class="comp-page-table__table"
      :data="tableData"
      @sort-change="sortChange"
      @selection-change="selectionChange"
      style="width: 100%">

      <!-- 选择栏列
      -------------------------- -->
      <el-table-column
        v-if="Config.hasSelection"
        type="selection"
        align="center"
        width="55">
      </el-table-column>

      <!-- 数据列
      -------------------------- -->
      <template v-for="(column, index) in Config.colunms">

        <slot :name="column.label">
          <el-table-column
            v-if="typeof column.prop === 'string' && !column.isAudio"
            :key="index"
            align="center"
            :prop="column.prop"
            :label="column.label"
            :sortable="column.sortable && 'custom'">
          </el-table-column>
          <!-- 音频 -->
          <el-table-column
            v-if="typeof column.prop === 'string' && column.isAudio"
            :key="index"
            align="center"
            :label="column.label"
            :sortable="column.sortable && 'custom'">
            <template slot-scope="scope">
              <p v-if="!scope.row[column.isAudio]">{{ scope.row[column.prop] }}</p>
              <audio v-else
                :src="scope.row[column.prop]" controls>
                <p>你的浏览器不支持audio标签</p>
              </audio>
            </template>
          </el-table-column>
          <el-table-column
            v-if="typeof column.prop === 'object'"
            :key="index"
            align="center"
            :label="column.label"
            :sortable="column.sortable && 'custom'">
            <template slot-scope="scope">
              <span v-for="prop in column.prop"
                :key="prop">{{ getPropByPath(scope.row, prop).v }}
                <br/>
              </span>
            </template>
          </el-table-column>
        </slot>
      </template>

      <!-- 操作列
      -------------------------- -->
      <slot></slot>

    </el-table>

    <!-- 页脚区域
    -------------------------- -->
    <el-pagination
      v-if="Config.hasPagination"
      class="comp-page-table__pagination"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import { getPropByPath } from 'services/Util'

export default {
  name: 'CompPageTable',
  data () {
    return {
      currentPage: 1 // 当前页
    }
  },
  props: {
    tableConfig: Object, // 表格配置
    tableData: Array, // 表格数据
    total: Number, // 表格总条数
    loading: Boolean, // 表格是否处于加载中
    pageSize: Number, // 每页条数
    pageSizes: Array // 每页条数规格数组
  },
  computed: {
    // 结合基础配置后的表格配置
    Config () {
      const Default = {
        hasSelection: true,
        hasPagination: true,
        colunms: []
      }
      return { ...Default, ...this.tableConfig }
    }
  },
  methods: {
    getPropByPath,
    // 排序改变
    sortChange (data) { this.$emit('sortChange', data) },
    // 当前页面改变
    currentChange (currentPage) { this.$emit('currentChange', currentPage) },
    // 每页规格改变
    sizeChange (currentSize) { this.$emit('sizeChange', currentSize) },
    // 选择框选择改变
    selectionChange (selectList) { this.$emit('selectionChange', selectList) }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(page-table) {
  height: 100%;
  @include e(table) {
    height: calc(100% - 52px);
    .el-table__body-wrapper {
      overflow: auto;
      height: calc(100% - 48px);
    }
    th {
      .cell {
        // 表头单元格保留换行
        white-space: pre-line;
      }
    }
  }
  @include e(pagination) {
    margin-top: 20px;
  }
}
</style>
